<template>
    <div class="popup">
        <div class="popup_content">
            <slot></slot>
        </div>
        <div class="shade"></div>
    </div>
</template>

<script>
    export default {
        name:'popup',
        props:{

        }
    }
</script>

<style lang="scss" scoped>
    @import '../../style/var.scss';

    .popup{
        position: fixed;
        top:0;
        left:0;
        z-index: 999;
        width:100%;
        height:100%;

        .popup_content{
            position: absolute;
            top:50%;
            left:50%;
            z-index: 999;
            transform: translate3d(-50%,-50%,0);
            background:#fff;
            border-radius: 10px;
            overflow: hidden;
        }
        .shade{
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:rgba(0,0,0,.4);
            
        }
    }
</style>

